<template>
  <div>
    <div class="header">标签生成工具</div>
    <div class="content-box">
      <div class="box-l scroll-container">
        <boxLeft
          @imgChange="handleLeftImgChange"
          @txtChange="handleLeftTxtChange"
          @howMuchChange="handleLeftHowMuchChange"
          @handleJsonChange="handleLeftJsonChange"
          @handleTableChnage="handleLeftTableChange"
        />
      </div>
      <div class="box-c">
        <boxCenter ref="boxCenterRef" />
      </div>
      <div class="box-r">
        <boxRight
          ref="boxRightRef"
          @jsonChange="handleJsonChange"
          @imgChange="handleRightImageChange"
        />
      </div>
    </div>
  </div>
</template>

<script>
import boxLeft from "./components/boxLeft.vue";
import boxCenter from "./components/boxCenter.vue";
import boxRight from "./components/boxRight.vue";
export default {
  components: {
    boxLeft,
    boxCenter,
    boxRight,
  },
  methods: {
    // 生成表格
    handleLeftTableChange() {
      this.$refs.boxCenterRef.addTableInit();
    },
    // 回显数据
    handleLeftJsonChange() {
      this.$refs.boxCenterRef.addJsonInit();
    },
    // 左侧集合图形变化
    handleLeftHowMuchChange(val) {
      this.$refs.boxCenterRef.addHowMuch(val);
    },
    handleLeftImgChange(val) {
      this.$refs.boxCenterRef.addImage(val.url);
      this.$refs.boxRightRef.txtNameChange(val.txt);
    },
    handleLeftTxtChange(val) {
      this.$refs.boxCenterRef.addTxt(val);
    },
    // 点击导出json
    handleJsonChange() {
      this.$refs.boxCenterRef.exportCanvasAsJSON();
    },
    // 点击导出图片
    handleRightImageChange() {
      this.$refs.boxCenterRef.exportCanvasAsImage();
    },
  },
};
</script>

<style lang="scss" scoped>
@import "./styles/home.scss";
</style>
